<template>
  <div class="container">
    <div class="card-content">
      <radio-Button-Group
        :changeValue="radioValue"
        :radioOptions="testOptions"
        @change="radioChange"
      />
    </div>
  </div>
  <layout-card
    v-model="search"
    :filters="demoOptions"
    headline="数据筛选"
    headtitle="信息列表"
    :hasButton="true"
    :hasTableButton="true"
    :buttonFilters="buttonOptions"
    @search-change="getData"
    @search-reset="searchReset"
  >
    <table-common
      :columns="demoColumns"
      :loading="loading"
      :pagination="pager"
      :table-data="data?.data?.demo"
      size="large"
      @current-change="changeCurrent"
      @size-change="changePageSize"
    >
      <template #process="{row}">
        <!-- 提示：此处状态值根据具体业务来处理，此处仅做自定义列示例  -->
        <el-text type="success" v-if="row['process']==='1'">已完成（10/10）</el-text>
        <el-text type="warning" v-else-if="row['process']==='2'">执行中（2/20）</el-text>
        <el-text type="danger" v-else-if="row['process']==='3'">未开始 （0/20）</el-text>
      </template>
      <template #action="{row}">
        <!-- 自定义操作栏示例  -->
        <el-button class="link-btn" @click="handleEdit(row)" link type="primary">编辑</el-button>
        <el-button class="link-btn" link type="danger">删除</el-button>
      </template>
    </table-common>
  </layout-card>
  <layout-card
    v-model="search"
    :filters="exampleOptions"
    headline="信息列表"
    headtitle="数据筛选"
    :hasButton="true"
    @search-change="getData"
    @search-reset="searchReset"
  >
    <template #action>
      <el-button type="primary" @click="handleCreate">导出</el-button>
      <el-button type="primary" @click="handleCreate">新增</el-button>
    </template>
    <table-common
      :columns="exampleColumns"
      :loading="loading"
      :pagination="pager"
      :table-data="data?.data?.list"
      size="large"
      @current-change="changeCurrent"
      @size-change="changePageSize"
    >
      <!-- 提示：需要格式化显示内容的字段值根据实际情况修改，此处示例使用的是area  -->
      <template #area="{row}">
        <el-popover
          placement="bottom"
          :width="260"
          trigger="click"
          content="若需进入隔离区，则请办理相关证件!"
          v-if="row['area']==='隔离区'"
        >
          <template #reference>
            <el-text type="primary">
              <el-icon><Warning /></el-icon>
            </el-text>
          </template>
        </el-popover>
        {{ row['area'] }}
      </template>
      <!-- 提示：需要格式化显示内容的字段值根据实际情况修改，此处示例使用的是state  -->
      <template #state="{row}">
        <!-- 提示：此处状态值根据具体业务来处理，此处仅做自定义列示例  -->
        <el-text v-if="row['state']==='0'">草稿中</el-text>
        <el-text v-else-if="row['state']==='1'">待审批</el-text>
        <el-text type="danger" v-else-if="row['state']==='2'">已审批</el-text>
        <el-text v-else-if="row['state']==='3'">已准入</el-text>
        <el-text type="danger" v-else-if="row['state']==='4'">已过期</el-text>
        <el-text v-else-if="row['state']==='5'">已作废</el-text>
        <el-text v-else-if="row['state']==='6'">已准出</el-text>
        <br>
        <el-text type="error" v-if="row['stateText']!==''">
          {{(row['stateText'] )}}
        </el-text>
      </template>
      <template #process="{row}">
        <!-- 提示：此处状态值根据具体业务来处理，此处仅做自定义列示例  -->
        <el-text type="success" v-if="row['process']==='1'">已完成（10/10）</el-text>
        <el-text type="warning" v-else-if="row['process']==='2'">执行中（2/20）</el-text>
        <el-text type="danger" v-else-if="row['process']==='3'">未开始 （0/20）</el-text>
      </template>
      <template #action="{row}">
        <!-- 自定义操作栏示例  -->
        <el-button class="link-btn" @click="handleEdit(row)" link type="primary">编辑</el-button>
        <el-button class="link-btn" link type="danger">删除</el-button>
      </template>
    </table-common>
  </layout-card>
  <edit-dialog
    :centerDialogVisible="centerDialogVisible"
    :tilte="addTilte"
    :key="timer"
    @Cancel="Cancel"
    @Submit="Submit"
  >
    <template #content>
      <layout-card
        v-model="search"
        :filters="dialogType"
        :hasButton="false"
      />
    </template>
  </edit-dialog>
</template>

<script lang="ts" setup>
import { computed, ref, onBeforeMount } from 'vue'
// 7-18修改LayoutCard 页面，hasButton参数为false时显示为弹窗样式，为true时显示为搜索栏样式
import LayoutCard from '@/components/LayoutCard/index.vue'
import TableCommon from '@/components/TableCommon/index.vue'

import { exampleColumns, demoColumns } from '@/views/Demo/config/columns'
import { buttonOptions, demoOptions, exampleOptions, dialogOptions, dialogEditOptions } from '@/views/Demo/config/filters'
import { usePagination } from 'vue-request'

import editDialog from '@/components/editDialog/index.vue'
// 新增按钮组组件导入
import radioButtonGroup from '@/components/RadioButtonGroup/index.vue'
// =============模拟接口数据-START
// 此处是模拟的接口返回数据，项目中请用`@/api/`下接口代替，删除当前代码！
const Service = (data: ListParams) => {
  return new Promise((resolve) => {
    // 模拟数据写入，实际开发使用接口数据写入
    // area1 这个值仅用于判断演示，根据实际情况进行编写
    demoOptions.forEach(e=>{
      if(e.prop == "area1"){
        // 这部分数据应该由接口获取
        // 刚进入页面和点击清空时，应把选择情况清空
        e.inputProps.options = [
          {label: '隔离区外(T2/T3) ', value: 1},
          {label: '隔离区内(南指廊/南三/T2/T3) ', value: 2}
        ]
        // 手动重写单选按钮点击事件
        e.events.change = function(value, evt){
          // 单选联动，示例中只设计了1和2选项，实际开发应该根据接口传值并获取数据，无需进行判断
          if(value == 1){
            evt.setOptions('inquiryType', [
              { label: '', value: '' }, // 如果接口数据获取没有空值，建议补上一个空值，否则会默认选择第一项
              { label: '值客、机票类', value: '1' },
              { label: '安检类', value: '2' },
              { label: '无效', value: '3' }
            ])
          }else{
            evt.setOptions('inquiryType', [
              { label: '', value: '' },
              { label: '测试值1', value: '1' },
              { label: '测试值2', value: '2' },
              { label: '测试值3', value: '3' }
            ])
          }
        }
      }
      if(e.prop == "inquiryType"){
        // 这部分数据应该由接口获取
        // 刚进入页面和点击清空时，应把选择情况清空
        e.inputProps.options = []
      }
    })
    setTimeout(() => {
      const response = {
        params: data,
        data: {
          list: [
            { project: '运行保障巡查1', area: '隔离区', problemType: '2023年10KV进线柜巡查', startTime: '2022/9/15', endTime: '2022/9/15', creator: '朱国刚1', createTime: '20220221 13:45:22 20', state: '0', process: '3' },
            { project: '运行保障巡查2', area: '隔离区', problemType: '2023年10KV进线柜巡查', startTime: '2022/9/15', endTime: '2022/9/15', creator: '朱国刚2', createTime: '20220221 13:45:22 20', state: '1', process: '1' },
            {
              project: '运行保障巡查3', area: '非隔离区', problemType: '2023年10KV进线柜巡查', startTime: '2022/9/15',
              endTime: '2022/9/15', creator: '朱国刚3', createTime: '20220221 13:45:22 20', state: '2', process: '2',
              stateText: "过期：1"
            },
            {
              project: '运行保障巡查4', area: '非隔离区', problemType: '2023年10KV进线柜巡查', startTime: '2022/9/15',
              endTime: '2022/9/15', creator: '朱国刚4', createTime: '20220221 13:45:22 20', state: '3', process: '1',
              stateText: "通过: 1; 驳回: 3"
            },
            { project: '运行保障巡查5', area: '非隔离区', problemType: '2023年10KV进线柜巡查', startTime: '2022/9/15', endTime: '2022/9/15', creator: '朱国刚5', createTime: '20220221 13:45:22 20', state: '4', process: '2' },
            { project: '运行保障巡查6', area: '非隔离区', problemType: '2023年10KV进线柜巡查', startTime: '2022/9/15', endTime: '2022/9/15', creator: '朱国刚6', createTime: '20220221 13:45:22 20', state: '5', process: '3' }
          ],
          demo: [
            { project: '运行保障巡查1', problemType: '2023年10KV进线柜巡查', oldtime1: '2023-03-03 13:40', oldtime2: '2023-03-03 15:30', time1: '13:40', time2: '15:30', creator: '朱国刚1', flightDate: '2023-03-03', state: '启用', process: '3' },
            { project: '运行保障巡查2', problemType: '2023年10KV进线柜巡查', oldtime1: '2023-03-03 15:20', oldtime2: '2023-03-03 17:30', time1: '15:20', time2: '17:30', creator: '朱国刚2', flightDate: '2023-03-03', state: '启用', process: '1' },
            { project: '运行保障巡查3', problemType: '2023年10KV进线柜巡查', oldtime1: '2023-03-03 17:50', oldtime2: '2023-03-03 19:30', time1: '17:50', time2: '19:30', creator: '朱国刚3', flightDate: '2023-03-03', state: '启用', process: '2' },
            { project: '运行保障巡查4', problemType: '2023年10KV进线柜巡查', oldtime1: '2023-03-03 09:10', oldtime2: '2023-03-03 13:30', time1: '09:10', time2: '13:30', creator: '朱国刚4', flightDate: '2023-03-03', state: '启用', process: '1' },
            { project: '运行保障巡查5', problemType: '2023年10KV进线柜巡查', oldtime1: '2023-03-03 01:20', oldtime2: '2023-03-04 07:30', time1: '01:20', time2: '07:30', creator: '朱国刚5', flightDate: '2023-03-03', state: '启用', process: '2' },
            { project: '运行保障巡查6', problemType: '2023年10KV进线柜巡查', oldtime1: '2023-03-03 11:30', oldtime2: '2023-03-04 15:30', time1: '11:30', time2: '15:30', creator: '朱国刚6', flightDate: '2023-03-03', state: '启用', process: '3' }
          ],
          total: 105
        }
      }
      resolve(response)
    }, 500)
  })
}
// =============模拟接口数据==END

const {
  run,
  data,
  loading,
  current,
  pageSize,
  total,
  changeCurrent,
  changePageSize
} = usePagination(Service, {
  manual: true,
  pagination: {
    currentKey: 'pageNum',
    pageSizeKey: 'pageSize',
    totalKey: 'data.total'
  }
})
const testOptions = ref([
  {label: '全部', value: 1},
  {label: '安检通道告警', value: 2},
  {label: '登机口告警', value: 3, num: 12},
  {label: '值机通道告警', value: 4},
  {label: '人流密度告警', value: 5, num: 3}
])
// 7-21新增用于保存下拉列表选择数据
const value = ref<string[]>([])
const radioValue = ref()
// 新增弹窗是否打开
const centerDialogVisible = ref(false)
// 弹窗标题
const addTilte = ref('新增问题类型')
// 弹窗页面类型
const dialogType = ref()
// 时间戳，用于确保弹窗页面能加载不同的界面
const timer = ref()
// const visible = ref(false)
// const isAdd = ref(true)
// const handleCreate = () => {
//   isAdd.value = true
//   visible.value = true
// }
// 7-17------------------
// 打开新增窗口
const handleCreate = () => {
  timer.value = new Date().getTime()
  dialogType.value = dialogOptions
  centerDialogVisible.value = true
}
const handleEdit = (row) => {
  dialogType.value = dialogEditOptions
  // 该循环用于进行编辑页面数据回显，需要字段对应
  dialogEditOptions.forEach(e=>{
    if(row[e.prop]!=null){
      e.defaultValue = row[e.prop]
    }
  })
  timer.value = new Date().getTime()
  addTilte.value = "编辑问题类型"
  centerDialogVisible.value = true
}
// 新增窗口点击取消
const Cancel = () => {
  centerDialogVisible.value = false
  dialogType.value = ""
}
const radioChange = (value) => {
  radioValue.value = value
  console.log(value)
}
// 新增窗口点击确认
const Submit = () => {
  centerDialogVisible.value = false
}
// 7-17------------------
const pager = computed(() => ({
  currentPage: current.value,
  pageSize: pageSize.value,
  total: total.value,
  // 7-24 手动设置了总页数
  pageCount: Math.ceil(total.value/pageSize.value)
}))
const search = ref<FilterDataType>({})

const searchReset = (data: FilterDataType) => {
  console.log(radioValue.value)
  radioValue.value = 1
  search.value = data
  pager.currentPage = 1
  pager.pageSize = 10
  console.log(search.value)
  getData()
}
// 获取数据
const getData = () => {
  const params = {
    pageNum: current.value,
    pageSize: pageSize.value,
    condition: search.value
  }
  run(params)
}
onBeforeMount(getData)
</script>
<style>
.container {
  background: #f5f7f9;
  min-height: auto;
  overflow: hidden;
}
.container .card-content {
  padding: 10px;
  margin: 0;
  background: #FFF;
  border-radius: 8px;
}
</style>
